import React, {Component} from 'react';
import {ACTIVE, ALL, COMPLETE} from "../constants/index";
import classnames from 'classnames'
import PropTypes from "prop-types";

const footerList = [
  {
    value: ALL,
    label: 'all'
  },
  {
    value: ACTIVE,
    label: 'Active'
  },
  {
    value: COMPLETE,
    label: 'Complete',
  },

]

class Footer extends Component {
  static propTypes = {
    status: PropTypes.string,
    len: PropTypes.number,
    setStatus: PropTypes.func,
    clear: PropTypes.func
  }
  render() {
    const {status} = this.props
    return (
      <footer className="footer">
        <span className="todo-count"><strong>{this.props.len}</strong> item left</span>
        <ul className="filters">
          {
            footerList.map(item => (
              <li key={item.value}>
                <a
                  className={classnames({selected: status === item.value})}
                  href="#/"
                  onClick={this.props.setStatus(item.value)}
                >{item.label}</a>
              </li>
            ))
          }
        </ul>
        <button className="clear-completed" onClick={this.props.clear}>Clear completed</button>
      </footer>
    );
  }
}

export default Footer;
